<template>
  <div class="app-container">

    
     <query-panel @query = 'handleFilter' @reset="handleReset" 
          :showOpen="false" labelWidth="100px">
          <el-form-item label="开始日期">
               <el-date-picker
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="listQuery.start"
                type="date"
                :editable="false"
                placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
          
          <el-form-item label="结束日期">
              <el-date-picker
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="listQuery.end"
                type="date"
                :editable="false"
                placeholder="选择日期">
              </el-date-picker>
          </el-form-item>

          <el-form-item label="操作人工号">
            <el-input v-model="listQuery.staffId" class="filter-item" placeholder="请输入工号" maxlength="10"   clearable=""/>      
          </el-form-item>
            
        </query-panel>


    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" 
    :height="tableHeight()"
    element-loading-text="正在查询中。。。" border fit highlight-current-row style="width:100%;">

      <el-table-column align="center" width="180" label="时间" prop="createDate" />

      <el-table-column align="center" width="150" label="操作人工号" prop="staffId" >
      </el-table-column>

      <el-table-column align="center" width="150" label="类型" prop="optType" >
      </el-table-column>
      
      <el-table-column align="left" min-width="250" label="日志内容" prop="remark"  />
      
    </el-table>

    <div class="pageHolder">
      <el-pagination
        background
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handlePageSizeChanged"
        @current-change="pageChange"
      />
    </div>

     

  </div>

</template>

<style scoped>
  .pageHolder{
    padding:20px 10px 10px;
    text-align: right;
  }
  .avatar{
      width:200px;
  }
</style>


<script setup lang="ts">
import {reactive, ref,onMounted} from 'vue'
import configs from "@/util/config.ts";
import http from "@/api/js/http";
import QueryPanel from '@/components/queryPanel.vue'
import {tableHeight} from '@/util/index.ts'


const list = ref([])
const total = ref(0)
const listLoading = ref(true)
const listQuery = reactive({
  page: 1,
  limit: configs.limit,
  start:null,
  end:null,
  staffId:null
});
  
  
onMounted(()=>{
  getList();
})
    
const handleReset =()=>{
  listQuery.page=1;
  listQuery.limit = configs.limit;
  handleFilter();
}

 const  handlePageSizeChanged=(size:any)=>{
      listQuery.limit = size;
      getList();
    }

const    pageChange=(page:any)=> {
      listQuery.page = page
      getList()
    }

 const    getList= ()=>{
      listLoading.value = true

      http.get<IList<any>>("/OptLog/list", listQuery)
      .then((resp) => {
      var respList = resp?.data?.list;
      //@ts-ignore
      list.value = respList;
      listLoading.value = false;
      if (resp?.data?.total) {
        total.value = resp?.data?.total;
      }
    })
    .catch(() => {
      list.value = [];
      total.value = 0;
      listLoading.value = false;
    });
  }

    
  const  handleFilter=()=>{
      listQuery.page = 1
      getList()
    }
   

</script>
